function getRandom(min,max){
    return Math.floor(Math.random()*(max+1-min)+min)
}
let cvs = document.getElementById('cvs')
cvs.width = window.innerWidth*devicePixelRatio
cvs.height = window.innerHeight*devicePixelRatio
let ctx = cvs.getContext('2d');
class Point{
    constructor(){
        this.r = 6;
        this.x = getRandom(0,cvs.width-this.r*2);
        this.y = getRandom(0,cvs.height-this.r*2);
        this.xSpeed = getRandom(-50,50)
        this.ySpeed = getRandom(-50,50)
        this.lastDrawTime = null
       
    }
    draw(){
        if(this.lastDrawTime){
            const duration = (Date.now()-this.lastDrawTime)/1000;
            const xDis = this.xSpeed*duration;
            const yDis = this.ySpeed*duration;
            let  x = this.x+xDis
            let  y = this.y+yDis
           if(x>cvs.width-this.r){
            x= cvs.width-this.r
            this.xSpeed = -this.xSpeed
           }else if(x<0){
            x= 0 
            this.xSpeed = -this.xSpeed
           }
           if(y>cvs.height-this.r){
                y= cvs.height-this.r
                this.ySpeed = -this.ySpeed
            }else if(y<0){
                y=0
                this.ySpeed = -this.ySpeed
            }

                this.x=x
                this.y= y
                console.log('y',y)
        }
        ctx.beginPath()
        ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
        ctx.fillStyle ='#fff';
        ctx.fill()
        this.lastDrawTime = Date.now()
    }
}
class Graph{
    constructor(pointNumber = 30,maxDis = 200){
        this.pointNumber = pointNumber
        this.maxDis = maxDis
        this.points = new Array(this.pointNumber).fill(0).map(()=>new Point())
    }
    draw(){
        requestAnimationFrame(()=>{
            this.draw()
        })
        ctx.clearRect(0,0,cvs.width,cvs.height)
        for(let i =0;i<this.points.length;i++){
            let p1 = this.points[i]
            p1.draw(0,0,cvs.width,cvs.height)
            for(let j=i+1;j<this.points.length;j++){
                const p2 = this.points[j]
                let d = Math.sqrt((p1.x-p2.x)**2+(p1.y-p2.y)**2)
                if(d>this.maxDis){
                    continue;
                }
                    ctx.beginPath();
                    ctx.moveTo(p1.x,p1.y)
                    ctx.lineTo(p2.x,p2.y)
                    ctx.closePath()
                    console.log(p1,p2)
                    console.log(d,1-d/this.maxDis)
                    ctx.strokeStyle = `rgba(200,200,200,${1-d/this.maxDis}`;
                    ctx.stroke()
                
            }
        }
    }
}
new Graph().draw()